/**
 * 通用表单
 */
import { DatePicker, Form, Input, Select } from 'antd';
import { CloseCircleOutlined } from '@ant-design/icons';
import styles from './forms.less';
const { RangePicker } = DatePicker;
import { antiShake } from '../index';
import dayjs from 'dayjs';
const App = (props) => {
  const [form] = Form.useForm();
  const getPlaceHolder = (ele) => {
    if (ele.placeholder) return ele.placeholder;
    if (ele.type === 'Input') {
      return `请输入${ele.mappingName || ele.label}`;
    } else if (ele.type === 'Select') {
      return `请选择${ele.mappingName || ele.label}`;
    }
  };
  const getSuggestion = (val) => {
    props.options.forEach((ele) => {
      if (ele.type === 'RangePicker' && val[ele.prop]?.length) {
        const [start, end] = val[ele.prop];
        val[ele.prop] = [
          dayjs(start).format('YYYY-MM-DD'),
          dayjs(end).format('YYYY-MM-DD'),
        ];
      }
    });
    antiShake(() => props.onChange && props.onChange(val));
  };
  return (
    <Form
      name={props.name ? props.name : 'basic'}
      autoComplete="off"
      labelAlign="right"
      size="mini"
      layout="inline"
      form={form}
      onValuesChange={(_, v) => getSuggestion(v)}
      onFinish={(e) => getSuggestion(e)}
    >
      {props.options.map((ele) => {
        const formItemProps = {
          label: <span style={{ width: 83 }}>{ele.label}</span>,
          name: ele.prop,
          ...ele.attrsItem,
          style: { marginBottom: 20 },
        };
        return ele.type === 'Input' ? (
          <Form.Item {...formItemProps} key={ele.prop}>
            <div
              style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
              }}
            >
              <Input
                placeholder={getPlaceHolder(ele)}
                {...ele.attrs}
                style={{ width: '140px' }}
              />
              {ele.delete ? (
                <CloseCircleOutlined
                  className={styles.delIcon}
                  onClick={() => {
                    form.submit();
                    props.delFun && props.delFun(ele);
                  }}
                />
              ) : (
                <span style={{ padding: '0 12px' }}> </span>
              )}
            </div>
          </Form.Item>
        ) : ele.type === 'Select' ? (
          <Form.Item {...formItemProps} key={ele.prop}>
            <Select
              {...ele.attrs}
              allowClear={true}
              placeholder={getPlaceHolder(ele)}
              style={{ width: '140px', marginRight: '24px' }}
            />
          </Form.Item>
        ) : ele.type === 'RangePicker' ? (
          <Form.Item {...formItemProps} key={ele.prop}>
            <RangePicker
              style={{ width: '140px', marginRight: '24px' }}
              placeholder={['开始', '结束']}
              format="YYYY-MM-DD"
              {...ele.attrs}
            />
          </Form.Item>
        ) : (
          ''
        );
      })}
    </Form>
  );
};
export default App;
